<template>
    <div>
        <a-card class="top-card">
            <div class="user-top">
                <div class="top-title">
                    <icon-message />心得管理
                </div>
                <div class="top-actions">
                    <a-button shape="round">
                        <template #icon>
                            <icon-refresh @click="refreshDataList" />
                        </template>
                    </a-button>
                </div>
            </div>
        </a-card>
        <a-card v-if="listloading" class="spin-row">
            <a-spin tip="心得列表加载中..." />
        </a-card>
        <a-list v-else class="user-list">
            <a-list-item v-for="(i, k) in dataList" :key="k">
                <a-list-item-meta>
                    <template #title>
                        <div class="user-name-id">
                            <div class="name">{{ i.user?.userName }}</div>
                        </div>
                    </template>
                    <template #description>
                        <div class="user-des">
                            {{ i.content }}
                        </div>
                    </template>
                    <template #avatar>
                        <a-avatar shape="circle">
                            <img alt="avatar" :src="i.user?.userAvatarUrl" />
                        </a-avatar>
                    </template>
                </a-list-item-meta>
                <template #actions>
                    <icon-edit @click="editComment(k)" />
                    <a-popconfirm @ok="delComment(i.commentId)" position="tr" type="error"
                        content="是否确认删除该条心得?"><icon-delete /></a-popconfirm>

                </template>
            </a-list-item>
        </a-list>
        <div class="footer-page">
            <a-pagination :current="currentPage" :total="total" :page-size="pageSize" show-total
                @change="handlePageChange" />
        </div>
    </div>
    <a-modal v-model:visible="detailVisible" simple :footer="null">
        <template #title>
            心得信息修改
        </template>
        <div>
            <a-form :model="editForm" @submit="updateOldComment">
                <a-form-item field="commentId" label="心得ID">
                    <a-input v-model="editForm.commentId" disabled />
                </a-form-item>
                <a-form-item field="topic" label="所属话题">
                    <a-tag color="arcoblue">{{ editForm.topic }}</a-tag>
                </a-form-item>
                <a-form-item field="content" label="心得内容">
                    <a-textarea v-model="editForm.content" :auto-size="{
                        minRows: 2,
                        maxRows: 5
                    }" />
                </a-form-item>
                <a-form-item class="edit-btn">
                    <div class="btns">
                        <div class="btn"><a-button type="primary" html-type="submit">提交</a-button></div>
                        <div class="btn"><a-button @click="cancelEdit">取消</a-button></div>
                    </div>
                </a-form-item>
            </a-form>
        </div>
    </a-modal>
</template>
<script>
import { adminUserlist } from '@/api/adminUserlist'
import { adminUpdateStatus } from '@/api/adminUpdateStatus'
import { adminUpdateUser } from '@/api/adminUpdateUser'
import { getCommentList, deleteComment,updateComment } from '@/api/adminCommentApi'
import { computed, reactive, ref } from 'vue';
import {
    IconCaretRight,
    IconCaretLeft,
    IconIdcard,
    IconMessage,
    IconUser,
    IconUserGroup,
    IconBook,
    IconApps,
    IconEdit,
    IconDelete,
    IconPlus,
    IconRefresh,
    IconTags,
} from '@arco-design/web-vue/es/icon';
import { Message } from '@arco-design/web-vue';
export default {
    components: {
        IconCaretRight,
        IconCaretLeft,
        IconIdcard,
        IconMessage,
        IconUser,
        IconUserGroup,
        IconBook,
        IconApps,
        IconEdit,
        IconDelete,
        IconPlus,
        IconRefresh,
        IconTags,
    },
    methods: {
        async handlePageChange(page) {
            this.currentPage = page;
            const res = await getCommentList(this.currentPage, this.pageSize);
            this.dataList = res.data.data.list;
            this.total = res.data.data.total;
        },
    },
    created() {

    },
    setup() {
        const currentIndex = ref(0);
        const dataList = ref([]);
        const listloading = ref(false);
        const switchLoading = ref(false);
        const pageSize = ref(5);
        const currentPage = ref(1);
        const total = ref(0);
        const editForm = ref({});
        const addForm = ref({});


        const detailVisible = ref(false);
        const addVisible = ref(false);
        const editComment = (index) => {
            currentIndex.value = index;
            editForm.value = dataList.value[index];
            detailVisible.value = true;
        };
        const delComment = async (cid) => {
            const res = await deleteComment(cid)
            if (res.data.code === 100) {
                Message.success('删除心得成功')
                refreshDataList()
            } else {
                Message.error('删除心得失败，请稍后再试')
            }
        }
        const cancelEdit = () => {
            detailVisible.value = false;
        };
        const handleCancel = () => {
            detailVisible.value = false;
        };
        const getComments = async () => {
            const res = await getCommentList(currentPage.value, pageSize.value)
            dataList.value = res.data.data.list;
            total.value = res.data.data.total;
            console.log(res.data.data);
        }
        const refreshDataList = () => {
            currentPage.value = 1;
            listloading.value = true;
            getComments().then(res => {
            }).finally(() => {
                listloading.value = false;
            });
        }
        const updateOldComment = async () => {
            const v = {
                commentId: editForm.value.commentId,
                content: editForm.value.content
            }
            const res = await updateComment(v)
            if (res.data.code === 100) {
                Message.success('心得信息更新成功')
                detailVisible.value = false
                refreshDataList()
            } else {
                Message.error('心得信息更新失败，请稍后再试')
            }
        }
        getComments()
        return {
            detailVisible,
            addVisible,
            editForm,
            pageSize,
            editComment,
            handleCancel,
            currentIndex,
            cancelEdit,
            switchLoading,
            addForm,
            currentPage,
            listloading,
            dataList,
            refreshDataList,
            total,
            delComment,
            updateOldComment
        };
    }
}
</script>
<style lang="less" scoped>
/deep/.arco-list-item-meta {
    align-items: flex-start;
}

.spin-row {
    display: flex;
    margin: 1rem;
    justify-content: center;
}

.top-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

.footer-page {
    display: flex;
    justify-content: flex-end;
    margin: 1rem;
}

.edit-btn {
    .btns {
        display: flex;
        gap: 1rem;
        justify-content: flex-end;
        width: 100%;

        .btn {
            display: flex;
            justify-content: flex-end;
        }
    }

}

.user-name-id {
    display: flex;
    align-items: center;
    gap: 8px;

    .name {
        font-size: 1rem;
    }

    .id {
        font-size: 13px;
        color: #999;
    }

    .tags {
        display: flex;
        gap: 5px;

        .tag {
            font-size: 12px;
            color: #999;
        }
    }
}

.user-des {
    margin-right: 2rem;
    font-size: 12px;
    color: #999;
    line-height: 22px;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.top-card {
    margin: 1rem;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
}

.user-list {
    margin: 1rem;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
}

.user-top {
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .top-title {
        display: flex;
        align-items: flex-end;
        gap: 5px;
        margin-left: 1rem;
        font-size: 1.5rem;
    }
}
</style>